<template>
  <div>
    <div class="panel">
      <div class="text">欢迎</div>
      <el-row class="row">
        <el-col :offset="6" :span="12">
          <el-input placeholder="请输入用户名"
            ><i
              slot="prefix"
              class="el-icon-user"
              style="font-size:1.5em;line-height:1.8em;"
            ></i
          ></el-input>
        </el-col>
      </el-row>
      <el-row class="row">
        <el-col :offset="6" :span="12">
          <!-- <router-link to="/chatPage"> -->
          <el-button type="primary" style="width:100%;" @click="jump">
            进入聊天室
          </el-button>
          <!-- </router-link> -->
        </el-col>
      </el-row>
      <el-row>
        <el-table :data="test" style="width: 100%">
          <el-table-column prop="id" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="180">
          </el-table-column>
          <el-table-column prop="sexual" label="性别"> </el-table-column>
        </el-table>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      test: {}
    };
  },
  methods: {
    jump() {
      /**
 * this.$axios.post([API路径]，[参数对象]).then(res=>{
 *   let result = res.data;
        if (result.status == -1) {
          alert(result.msg);
          return;
    }
    [处理result.data数据]
 * 
 * 
 * })
 */

      this.$axios.post("/chat/get", {  }).then(res => {
        let result = res.data;
        if (result.status == -1) {
          alert(JSON.stringify(result.msg));
          return;
        }
        console.log(result.data);
        this.test = result.data;
      });
    }
  }
};
</script>
<style scoped>
.panel {
  position: absolute;
  width: 30%;
  height: 40%;
  left: 35%;
  top: 20%;
  box-shadow: 0px 0px 20px lightgray;
}
.text {
  text-align: center;
  margin-top: 10%;
  font-size: 2rem;
  margin-bottom: 10%;
}
.row {
  margin-bottom: 10%;
}
.buttonBar {
  position: absolute;
  bottom: 10%;
  width: 100%;
}
</style>
